<template>
  <view class="nav-bar">
    <view class="nav-left" @click="handleBack">
      <!-- #ifndef MP-WEIXIN -->
      <uni-icons type="left" size="20" color="#333"/>
      <!-- #endif -->
      <text class="nav-title">{{ title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'NavBar',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.nav-bar {
  margin: 0 -30rpx;
  padding: 0 30rpx;
  display: flex;
  align-items: center;
  height: 88rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  background-color: #fff;
}

.nav-left {
  display: flex;
  align-items: center;
  font-size: 32rpx;
}

.nav-title {
  margin-left: 20rpx;
  font-weight: 500;
}
</style>